<template>
	<view class="apption">
    <view class="topMenu">
      <view v-for="list,index of partitionData" :key="index" class="list" :class="partitionDataValue===list.id?'active':''" @click="partitionClick(list)">{{ list.name }}</view>
    </view>
		<view class="bodyCont">
      <view class="searchTop">
        <text :class="goodsProp.order=='srot'?'active':''" @click="searchTopClick('srot')">综合</text>
        <text :class="goodsProp.order=='sale'?'active':''" @click="searchTopClick('sale')">销量</text>
				<view :class="goodsProp.order=='discount_price'?'active':''" @click="searchTopClick('discount_price')">价格<icon class="up" /></view>
        <text :class="goodsProp.order=='stock'?'active':''" @click="searchTopClick('stock')">仅看有货</text>
      </view>
      <view v-if="goodsListData.length>0" class="imageTextBox withinBox">
        <view v-for="list,index of goodsListData" :key="index" class="list">
          <image class="listImage" :src="list.logo"></image>
          <view class="tips_info" @click="commodityClick(list)">
              <image src="@/static/listbg.png" class="bg"></image>
              <view class="text">
                <view class="oldPrice">¥{{ list.market_price }}</view>
                <view class="price">¥{{ list.discount_price }}</view>
                <view v-if="list.is_pre==1" class="openTime">预售倒计时 {{ formatDate(list.end_time) }}</view>
                <view v-if="list.is_pre==0" class="openTime">开团时间 {{ formatDate(list.put_time) }}</view>
                <view class="residueNum">剩余数量 {{ list.stock }}</view>
              </view>
            </view>
            <button v-if="list.live_status===1" class="mini-btn statusBut" type="default" size="mini">直播中</button>
            <view class="contText">
              <view class="name">{{ list.title }}</view>
              <view class="downBox">
                <button v-if="list.label" class="tuijianBut" type="default" size="mini">{{ list.label }}</button>
                <view v-if="!list.label" />
                <view class="shareBut">
                  <icon class="icoShare" />分享
                  <button class="wx-button" open-type="share" :data-obj="list">隐藏的分享按钮</button>
                </view>
              </view>
            </view>
          </view>
      </view>
      <view v-else class="noData" style="height: calc(75vh - 204rpx);">
        <image src="../../static/nodata2.png" class="noImage"></image>
        <view class="textFont">暂无数据</view>
      </view>
		</view>
	</view>
</template>

<script>
import { getApi, postApi } from "@/api/index.js"
import moment from 'moment'
	export default {
		data() {
			return {
				title: 'Hello',
        partitionData: [],
        partitionDataValue: '',
        queryData: '',
				goodsProp: {
					cate_two: '',
					order: '' // 排序('srot':综合,'sale':'销量','价格':'discount_price','stock':只看有货)
				},
        goodsListData: [],
        page: 1,
        hasMore: true
			}
		},
    // 分享...
    onShareAppMessage(options) {
      if (options.from === 'button') {
        // 从按钮点击分享时的处理逻辑
        let item = options.target.dataset.obj; // 假设您的按钮有自定义数据属性data-obj来绑定商品数据
        console.log(item)
        return {
          title: item.title, // 商品标题
          path: `/pages/detail/detail?id=${item.id}`, // 商品详情页路径
          imageUrl: item.logo // 商品图片地址
        };
      }
    },
		onLoad(option) {
      this.queryData = option
      console.log(option)
			this.goodsProp.cate_two = option.id
      uni.setNavigationBarTitle({
        title: option.title // 设置为你想要显示的标题文本
      });
      this.currentTime = moment().format('YYYY/MM/DD')
      postApi('/index/partition').then(res => {
        if(res.code === 1){
          this.partitionData = res.data
          this.partitionDataValue = res.data[0].id
          this.init()
        }
      }).catch(err => {
      })
      wx.showShareMenu({
        menus: ['shareAppMessage', 'shareTimeline'] //'shareAppMessage'打开分享好友功能 | 'shareTimeline'打开分享到朋友圈功能
      });
		},
    onPullDownRefresh() {
      this.page = 1;
      this.goodsListData = [];
      this.init(true).then(() => {
        uni.stopPullDownRefresh();
      });
    },
    onReachBottom() {
      if (this.hasMore) {
        this.init();
      }
    },
		methods: {
      formatDate(date) {
        return moment(date).format('YYYY/MM/DD') // 格式化日期
      },
      init(isRefresh){
        let obj={
					partition: this.partitionDataValue,
          is_hot: 0,
          page: 1,
          limit: 10,
          order: this.goodsProp.order,
					cate_two: this.goodsProp.cate_two,
          tab: ''
        }
        if (isRefresh) {
          // 处理下拉刷新的逻辑
        } else {
          // 处理上拉加载的逻辑
          this.page += 1;
        }
        this.loading = true
        postApi('/goods/goodsList', obj).then(res => {
          if(res.code === 1){
            this.loading = false
            // // this.goodsListData = res.data.list
            // const start = (this.page - 1) * 10;
            // const end = start + 10;
            // const newItems = Array.from({ length: 10 }, (_, i) => `Item ${start + i}`);
            // this.goodsListData = isRefresh ? newItems : [...this.goodsListData, ...newItems];
            // this.hasMore = this.goodsListData.length < 100; // 假设总数不超过100条
            res.data.list.map((row) => {
              this.goodsListData.push(row)
            })
            // 是否为最后一页
            if (this.goodsListData.length >= res.data.count) {
              this.hasMore = false
            }
          }
        }).catch(err => {
          this.loading = false
        })
      },
			partitionClick(row){
				this.partitionDataValue = row.id
        this.page = 1
        this.goodsListData = []
				this.init()
			},
			searchTopClick(row){
				this.goodsProp.order = row
        this.page = 1
        this.goodsListData = []
				this.init()
			},
			commodityClick(row){ // 跳转商品详情页，直播中则跳转直播url
			  if(row.live_status===1){
			    uni.navigateTo({
			      url: `/pages/detail/detail?id=` + row.id
			    })
			  }else{
			    uni.navigateTo({
			      url: `/pages/detail/detail?id=` + row.id
			    })
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
.apption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	background: #F4F5F8;
  .topMenu{
    padding: 24rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #F5F6F7;
    box-sizing: border-box;
    font-size: 28rpx;
    .list{
      font-weight: 500;
      color: #000000;
    }
    .active{
      position: relative;
      font-weight: 500;
      color: #74C4BC;
      &:after{
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        margin-left: -24rpx;
        width: 46rpx;
        height: 4rpx;
        background: #74C4BC;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
  }
  .bodyCont{
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    .searchTop{
      padding: 24rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      .up{
        margin-left: 4rpx;
        vertical-align: middle;
        width: 0;
        height: 0;
        border-left: 6rpx solid transparent;
        border-right: 6rpx solid transparent;
        border-bottom: 12rpx solid #000;
      }
			.active{
				color: #CFB4A7;
			}
    }
  }
}
</style>
